<template>
  <mt-header :title="title" :class="$style.bgColor">
    <router-link :to="left.to" slot="left" v-if="left.name">
      <mt-button :icon="left. icon" :class="$style.fontStyle">{{left.name}}</mt-button>
    </router-link>
    <mt-button slot="right" v-if="right.name||right.icon" :icon="right.icon" @click="more">{{right.name}}</mt-button>
  </mt-header>
</template>
<script>
  /*
     this.$emit('doSth') 为父子组件之间的通信
     left ,right  根据传入的参数可以显示可以不显示，跳转不同的路径
      style可以修改默认的样式
  
    
  */
  export default {
    name: "ShHeader",
    props: {
      title: {
        type: String,
        default: "客户新建"
      },
      left: {
        type: Object,
        default: function () {
          return {
            to: "/",
            name: "返回",
            icon: "back"
          }
        }
      },
      right: {
        type: Object,
        default: function () {
          return {
            icon: "",
            name: ""
          }
        }
      }
    },
    created() {

    },
    methods: {
      more: function () {
        this.$emit('doSth') 
      }
    },
    mounted() {

    }

  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" module>
  @import '../../scss/index.scss';
  .bgColor {
    background-color: $white;
    color: $defaultColor;
    .fontStyle {
      color: $activeColor;
    }
    ;

  }

  ;
</style>